<template>
	<view>
		<!-- 搜索栏 -->
		<!-- <view class="search-view">
			<input class="search-input-view" type="text" value="" />
		</view> -->

		<!-- 商品列表 -->
		<!-- <view v-if="!dataListIsEmpty" class="dataListView">
			<view class="item" v-for="(item, index) in dataList" :key="index"  @click="detail(index)">
				<view class="item-image-view">
					<image class="item-image" :src="item.pic" mode="aspectFill"></image>
					<view class="item-intro">
						<view class="item-intro-text util-font-regular">{{item.name}}</view>
					</view>
				</view>
				<view class="item-merName util-font-medium">{{item.merMerchant.name}}</view>
				<view class="price-view util-font-regular">
					<view class="price-icon">￥</view>
					<view class="price-text">{{item.price/100.0}}</view>
					<view class="price-original util-font-regular">门店价￥{{item.originalPrice/100.0}}</view>
					<view class="price-brokerage">返佣{{item.commission/100.0}}元</view>
				</view>
			</view>
			<uni-load-more :status="'more'" @clickLoadMore="loadMore"></uni-load-more>
		</view>
		<view v-else class="empty-view">
			<image class="empty-image" src="../../static/noData.png" mode="aspectFit"></image>
			<view class="empty-title util-font-medium">暂无数据</view>
		</view>		 -->
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"

	export default {
		components: {
			uniIcons,
			uniSearchBar,
			uniLoadMore
		},
		data() {
			return {

				dataList: [],
				dataListIsEmpty: false,
				currentPage: 1,
				totalPage: 1,
				
				
				
			}
		},
		onLoad(options) {
			
			// this.loadData()
			
			// this.loadH5Data()
			// this.$wechat.isWechat()
		},
		methods: {
			loadData: function() {
				
				var that = this
				var userLocation = uni.getStorageSync('userLocation')
				
				that.sendRequest({
					url: 'app/merProduct/proPage',
					method: 'POST',
					header: that.$urlRequest.getHeader('void', 'json'),
					data: {
						cityCode: userLocation.regeocodeData.addressComponent.citycode,
						limit: 5,
						page: that.currentPage
					},
					success: function(res){
						
						that.totalPage = res.data.pages
						that.dataList = that.dataList.concat(res.data.records)
						
						if (that.dataList.length == 0) {
							that.dataListIsEmpty = true
						}else{
							that.dataListIsEmpty = false
						}
					}
				})
			},
			loadH5Data: function(){
				// location.href = 'http://api.wlkjlife.cn/app/wx/mp/wxa9697d11035f69d5/preAuth'
				// var that = this
				// uni.request({
				// 	url: '',
				// 	method:'GET',
				// 	success(res) {
				// 		uni.showModal({
				// 			content: '' + JSON.stringify(res),
				// 			showCancel: false
				// 		});
				// 	}
				// })
			},
			loadMore: function(){
				this.currentPage ++ 
				this.loadData()
			},
			detail: function(index){
				var that = this
				uni.navigateTo({
					url: 'detail?pid=' + (that.dataList[index]).id
				})
			},
			searchInput: function(event) {
				console.log("输入内容为：" + event.value)
			},
			searchConfirm: function(event) {
				console.log("确认输入内容为：" + event.value)
			},
			searchCancel: function(event) {
				console.log("取消输入")
			}
		},
		onReachBottom() {
			if (this.currentPage >= this.totalPage) {
				
			}else{
				this.currentPage += 1
				this.loadData()
			}
		},
		onPullDownRefresh() {
			this.totalPage = 1
			this.currentPage = 1
			this.dataList = []
			this.loadData()
		}
	}
</script>

<style>
	.login {
		width: 300upx;
		height: 88upx;
		color: #333333;
		border: 2upx solid #f1f1f1;
	}

	page {
		background-color: #f5F5F5;
	}

	.search-view {
		width: 690upx;
		height: 70upx;
		overflow: hidden;
		background-color: white;
		padding: 30upx;
	}

	/* #ifdef MP-WEIXIN */
	.search-view {
		width: 722upx;
		height: 102upx;
		overflow: hidden;
		background-color: white;
		padding: 14upx;
	}

	/* #endif */
	.search-bar {
		width: 690upx;
		height: 70upx;
		padding: 0upx;
	}

	.uni-search-bar {
		padding: 0upx;
	}

	.search-bar-content {
		overflow: hidden;
		width: 440upx;
		height: 45upx;
		padding-left: 150upx;
	}

	.search-icon {
		float: left;
	}

	.search-text {
		height: 45upx;
		line-height: 45upx;
		display: inline-block;
		color: #999999;
		float: left;
		margin-left: 5upx;
	}

	.images-view {
		width: 690upx;
		height: 276upx;
		padding: 0 30upx 30upx 30upx;
		background-color: white;
	}

	.swiper-item {
		width: 690upx;
		height: 276upx;
		background-color: #F1F1F1;
		/* margin: 1upx; */
		border-radius: 20upx;
	}

	.item {
		margin: 30upx 30upx 0;
		border-radius: 20upx;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.item-image-view {
		width: 690upx;
		height: 426upx;
		overflow: hidden;
		position: relative;
	}

	.item-image {
		width: 690upx;
		height: 426upx;
	}
	.item-intro {
		width: 650upx;
		position: absolute;
		bottom: 0;
		padding: 20upx;
		background-color: rgba(0,0,0,0.3);
	}
	.item-intro-text {
		color: #FFFFFF;
		font-size: 30upx;
		
		//两行
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.item-merName {
		width: 650upx;
		font-size: 36upx;
		margin: 20upx 20upx 10upx;
		height: 50upx;
		line-height: 50upx;
		color: #333333;
	}
	.price-view {
		width: 650upx;
		height: 55upx;
		margin: 10upx 20upx 20upx;
	}
	.price-icon {
		height: 55upx;
		line-height: 55upx;
		color: #d8622c;
		font-size: 28upx;
		float: left;
		position: relative;
		top: 8upx;
	}
	.price-text {
		height: 55upx;
		line-height: 55upx;
		color: #d8622c;
		font-size: 52upx;
		float: left;
	}
	.price-brokerage {
		padding: 3upx 10upx 3upx;
		background-color: #ec6e2d;
		float: right;
		height: 40upx;
		line-height: 40upx;
		border-radius: 6upx;
		color: #FFFFFF;
		font-size: 25upx;
		margin-top: 5upx;
	}
	.price-red-packet {
		padding: 5upx 10upx 5upx;
		float: left;
		height: 25upx;
		line-height: 25upx;
		border: 1upx solid #f8dedc;
		border-radius: 10upx;
		color: #ec6863;
		font-size: 18upx;
		margin-top: 15upx;
		margin-left: 20upx;
	}
	.price-original {
		padding: 5upx 10upx 5upx;
		float: left;
		height: 25upx;
		line-height: 25upx;
		color: #bbbbbb;
		font-size: 24upx;
		margin-top: 15upx;
		margin-left: 20upx;
	}

	/* 空数据提示 */
	.empty-view {
		text-align: center;
		margin-top: 200upx;
	}

	.empty-image {
		width: 300upx;
		height: 210upx;
	}

	.empty-title {
		color: #999999;
		font-size: 32upx;
		margin-top: 30upx;
	}
</style>
